<script lang="ts" setup>
import type { Title01ComponentMeta } from '@/definitions/type'
import { EWebDesignerComponentTheme } from '@/api/designer/model'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore, useInstStore } from '@/stores'
import { computed, type CSSProperties } from 'vue'
import './RenderTitle01.less'

defineOptions({
  name: 'RenderTitle01',
})
const props = defineProps<{
  render: Title01ComponentMeta
}>()
const instStore = useInstStore()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const lineStyle = computed<CSSProperties>(() => {
  const isLight = props.render.config.theme === EWebDesignerComponentTheme.浅色
  return { 
    background: isLight ? 'var(--title-color)' : instStore.detail?.themeColor,
  }
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('innerbox')">
      <div :class="prefix('subtitle')">
        {{ render.config.subTitle }}
      </div>
      <div v-if="render.config.title" :class="[prefix('titlewrap'), render.config.subTitle ? prefix('has-subtitle') : '']">
        <div :class="prefix('title')">
          {{ render.config.title }}
        </div>
        <!-- 线条 -->
        <div :class="prefix('title-line')" :style="lineStyle" />
        <!-- 描述 -->
        <div v-if="render.config.description" :class="prefix('description')">
          {{ render.config.description }}
        </div>
      </div>
    </div>
  </div>
</template>
